<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <!-- <el-select v-model="search_ftype" placeholder="请选择审批类型" style="width:20%;margin-right:10px" clearable>
        <el-option
          v-for="item in ftypeArr"
          :key="item.value"
          :label="item.hash.code_name"
          :value="item.hash.code_id"
        ></el-option>
      </el-select>-->
      <el-input
        placeholder="请输入名字"
        style="width:20%;margin-right:10px"
        v-model="username"
        clearable
      ></el-input>
      <el-date-picker
        style="margin-right:10px"
        clearable
        v-model="entrttimearr"
        type="daterange"
        rangeSeparator="至"
        valueFormat="yyyy-MM-dd"
        startPlaceholder="开始日期"
        endPlaceholder="结束日期"
      ></el-date-picker>
      <el-button size="mini" type="primary" @click="getallsplList">搜索</el-button>
    </el-row>
    <el-table :data="allsplList" stripe style="width: 100%;text-align:center">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column prop="hash.content" label="报销内容"></el-table-column>
      <el-table-column prop="hash.examinetime" label="时间"></el-table-column>
      <el-table-column prop="hash.username" label="报销人"></el-table-column>
      <el-table-column prop="hash.amountsum" label="报销金额"></el-table-column>
      <el-table-column prop="hash.bigamountsum" label="报销金额（大写）"></el-table-column>
      <el-table-column prop="hash.paytypename" label="支付方式"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="deletespl(scope.row,1)"
            v-if="scope.row.hash.statusmoney=='0'"
          >未打款</el-button>
          <el-button size="mini" type="primary" v-else disabled>已打款</el-button>
          <span
            v-if="scope.row.hash.paytype!='050101'"
            style="display:inline-block;padding-left:10px"
          >
            <el-button
              size="mini"
              type="danger"
              @click="deletespl(scope.row,2)"
              v-if="scope.row.hash.status=='0'"
            >未回票</el-button>
            <el-button size="mini" type="primary" v-else disabled>已回票</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="getallsplList"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>

    <el-dialog :title="titlename" :visible.sync="showspl" width="30%">
      <el-form labelWidth="120px">
        <el-form-item :label="labname">
          <el-select v-model="itemdata" placeholder="请选择" style="width:40%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="showspl = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitjbr">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selectorg from '~/components/common/selectorg.vue';
import { required } from 'vuelidate/lib/validators';

export default {
  components: {
    selectorg,
  },
  validations: {
    orgid: {
      required,
    },
    ftype: {
      required,
    },
  },
  data() {
    return {
      ts: this.newStore(),
      allsplList: [],
      amountid: '',
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10,
      },
      username: '',
      entrttimearr: [],
      showspl: false,
      itemdata: '',
      titlename: '',
      chousebt: 0,
      labname: '',
      options: [
        {
          value: '1',
          label: '是',
        },
        {
          value: '0',
          label: '否',
        },
      ],
      examinetime: '',
      twoexaminetime: '',
    };
  },
  created() {
    this.getallsplList();
  },
  methods: {
    getselectorgid(val) {
      this.orgid = val;
    },
    // 公共方法获取代码项
    getcodeData(supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this[arrname] = ts.d.data.operation1;
      });
    },
    reload() {
      this.isselectorg = false;
      this.$nextTick(() => {
        this.isselectorg = true;
      });
    },
    // 打款/回票操作
    submitjbr() {
      if (this.chousebt == 1) {
        const req = {
          handle:
            '0398B14C0EC6F01867D31307B7D9BCF9FAD73AA16B44841D318F06EF3E7C54B5A871DA0D1AF9F441CCBC14F13ABAA0D4',
          amountid: this.amountid,
          statusmoney: this.itemdata,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.sflag == 'success') {
            this.$message('修改成功');
            this.showspl = false;
            this.getallsplList();
          }
        });
      } else if (this.chousebt == 2) {
        const req = {
          handle:
            '0398B14C0EC6F01867D31307B7D9BCF9FAD73AA16B44841D318F06EF3E7C54B51B15C901C99EAC0D',
          amountid: this.amountid,
          status: this.itemdata,
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          if (ts.d.sflag == 'success') {
            this.$message('修改成功');
            this.showspl = false;
            this.getallsplList();
          }
        });
      }
    },
    // 查询
    getallsplList2() {
      if (this.entrttimearr.lenght == 2) {
        this.examinetime = this.entrttimearr[0];
        this.twoexaminetime = this.entrttimearr[1];
      }
      const req = {
        handle:
          '0398B14C0EC6F01867D31307B7D9BCF9E5B834F3031A84C4BF35823F59EB452A',
        username: this.username,
        examinetime: this.examinetime,
        twoexaminetime: this.twoexaminetime,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.getallsplList();
      });
    },
    // 获取审批流列表
    getallsplList() {
      this.examinetime = '';
      this.twoexaminetime = '';
      if (this.entrttimearr) {
        this.examinetime = this.entrttimearr[0];
        this.twoexaminetime = this.entrttimearr[1];
      }
      const req = {
        handle:
          '0398B14C0EC6F01867D31307B7D9BCF9E5B834F3031A84C4BF35823F59EB452A',
        username: this.username,
        examinetime: this.examinetime,
        twoexaminetime: this.twoexaminetime,
        start: (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize,
        limit: this.pagobj.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.allsplList = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    deletespl(col, val) {
      this.chousebt = val;
      if (val == 1) {
        this.titlename = '打款提示';
        this.labname = '是否打款';
      } else if (val == 2) {
        this.titlename = '回票提示';
        this.labname = '是否回票';
      }
      this.showspl = true;
      this.amountid = col.hash.amountid;
    },
    // 获取经办人列表
    getjbrList() {
      this.jbrList = [];
      const req = {
        handle:
          '45EE8FEFE87870C53A0536D8566DA8C94345851CDDF60960CBCA139672EA5B8C230BE336D992C9E341DC33B3A5E90841',
        query: '',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          const a = {};
          a.value = `${ts.d.data.operation1[index].hash.username} - ${ts.d.data.operation1[index].hash.orgname}`;
          a.id = ts.d.data.operation1[index].hash.pid;
          this.jbrList.push(a);
        }
      });
    },
    // 搜索经办人
    searchjbr(queryString, cb) {
      const results = queryString
        ? this.jbrList.filter(this.createStateFilter(queryString))
        : this.jbrList;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return jbrList => jbrList.value.indexOf(queryString) > -1;
    },
    // 选择经办人后
    selectjbr($event, index) {
      console.log($event, index);
      this.jbrarr[index].approval_user = $event.id;
    },
  },
};
</script>

<style>
</style>
